import { useState } from 'react'
import React from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate, Outlet } from 'react-router-dom';
import { Provider } from 'react-redux';
import store from './redux/store';
import LoginPage from './pages/LoginPage';
import RegisterPage from './pages/RegisterPage';
import Dashboard from './pages/Dashboard';
import DeviceListPage from './pages/DeviceListPage';
import GenerateQRCodePage from './pages/GenerateQRCodePage';
import ScanQRCodePage from './pages/ScanQRCodePage';
import ApiTestPage from './pages/ApiTestPage';
import JwtExamplePage from './pages/JwtExamplePage';
import ProfilePage from './pages/ProfilePage';
import Layout from './components/Layout';
import { useAuth } from './hooks/useAuth';
import './App.css';

// 使用useAuth Hook优化的私有路由组件
const PrivateRoute = ({ children, roles }) => {
  const { isAuthenticated, checkRole, isLoading } = useAuth();
  
  // 如果正在加载认证状态，显示加载指示器
  if (isLoading) {
    return (
      <div style={{ 
        display: 'flex', 
        justifyContent: 'center', 
        alignItems: 'center', 
        height: '100vh',
        fontSize: '18px'
      }}>
        正在验证身份...
      </div>
    );
  }
  
  // 如果未登录，重定向到登录页
  if (!isAuthenticated) {
    return <Navigate to="/login" replace />;
  }
  
  // 如果指定了角色且用户没有该角色，重定向到首页
  if (roles && !checkRole(roles)) {
    return <Navigate to="/" replace />;
  }
  
  return children;
};

// 包装PrivateRoute以在Router上下文外使用
const PrivateRouteWrapper = (props) => {
  return (
    <Provider store={store}>
      <PrivateRoute {...props} />
    </Provider>
  );
};

function App() {
  return (
    <Provider store={store}>
      <Router>
        <div className="app-container">
          <Routes>
            {/* 登录和注册页面 */}
            <Route path="/login" element={<LoginPage />} />
            <Route path="/register" element={<RegisterPage />} />
            
            {/* 带布局的路由 */}
            <Route path="/" element={
              <PrivateRoute>
                <Layout>
                  <Outlet />
                </Layout>
              </PrivateRoute>
            }>
              {/* 首页 */}
              <Route index element={<Dashboard />} />
              
              {/* 设备管理 */}
              <Route path="devices" element={<DeviceListPage />} />
              
              {/* 二维码生成 */}
              <Route path="generate-qrcode" element={<GenerateQRCodePage />} />
              
              {/* 二维码扫描 */}
              <Route path="scan-qrcode" element={<ScanQRCodePage />} />
              
              {/* API连接测试 */}
              <Route path="api-test" element={<ApiTestPage />} />
              
              {/* JWT示例页面 */}
              <Route path="jwt-example" element={<JwtExamplePage />} />
              
              {/* 个人中心 */}
              <Route path="profile" element={<ProfilePage />} />
            </Route>
            
            {/* 默认重定向到登录页面 */}
            <Route path="*" element={<Navigate to="/login" replace />} />
          </Routes>
        </div>
      </Router>
    </Provider>
  );
}

export default App;
